<template>
    <div class="p-login">
      <!-- 增加进入的过渡动画 -->
      <transition name="fade-down" appear>
          <div class="p-login-bar">
              <div class="p-title">
                  员工信息管理系统
              </div>
              <!-- 利用form组件构造的结构 -->
              <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
                <el-form-item prop="uname">
                    <el-input prefix-icon="el-icon-user" clearable v-model="ruleForm.username" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item prop="upwd">
                    <el-input prefix-icon="el-icon-key" clearable v-model="ruleForm.pass" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item class="form-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')">登陆</el-button>
                </el-form-item>
               </el-form>
          </div>
      </transition>
  </div>
</template>
<script>
import qs from 'qs';
export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      return {
        ruleForm: {
          uername:'',
          pass: '',
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3,  message: '长度至少 3 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.onLogin();
          } else {
            this.$message.error('登录失败');
            return false;
          }
        });
      },
      onLogin(){
        let info={username:this.ruleForm.username,password:this.ruleForm.pass};
        this.$http.post("/api/login",qs.stringify(info)).then((response)=>{
          console.log(response.data);
          if(response.data.flag===1){
            //成功了
            this.$router.push("/home");
            this.$message({message: '登陆成功',type: 'success'});
            this.$store.commit("updata",response.data.userinfo[0]);
            // console.log(this.$store.state.userinfo);
            
          }else{
            // 失败的
            this.$message.error('账号密码不正确');
            return false;
          }
        })
      }
    },
    
}
</script>
<style scoped>
    .p-login{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url(../assets/img/login-bg.jpg);
        background-size: cover;    
    }
    .p-login-bar{
        width: 400px;
        margin: auto;
        margin-top: 180px;
        padding: 15px 30px;
        background-color: rgba(255,255,255,0.7);
        border-radius: 9px;
        backdrop-filter: blur(2px);
    }
    .p-title{
      color: #000;
      text-align: center;
      font-size: 28px;
      font-weight: bold;
      padding: 15px 0px;
      text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.7);
    }
    .el-input{
      background-color: rgba(255,255,255,0.7) !important;     
    }
    .form-btn{
      text-align: center;
    }
    .el-input__inner{
      background: rgba(255,255,255,0.7) !important;
    }
    .fade-down-enter-active{
        animation: fade-down .3s;
    }
    .fade-down-leave-active{
        animation: fade-down .3s reverse;
    }
    @keyframes fade-down{
        from{opacity: 0;transform: translateY(-100px);}
        to{opacity: 1;transform: translateY(0px);}
    }
</style>